<template>
  <div class="card">
    <view class="thumbnail">
      <image class="avatar" :src="avatar"></image>
    </view>

    <view class="detail">
      <div class="detail-info">
        <div class="title">{{name}}
          <div id="seniority">3 年</div>
        </div>

        <div class="mono">
          <p>{{mono}}</p>
          <view class="demo">美发</view>
          <view class="demo">美甲</view>
          <view class="demo">美睫</view>
          <view class="demo">美眉</view>
          <view class="demo">美容</view>
        </div>
      </div>
    </view>
  </div>
</template>

<script>
export default {
  props: ['id', 'avatar', 'name', 'seniority', 'mono', 'items'],
  methods: {
  }
}
</script>

<style>
  #seniority {
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    line-height: 0.31rem;
    padding: 0 0.2rem;
    font-size: 0.22rem;
    top: -0.05rem;
    left: 0.1rem;
    text-align: center;
    color: #F3F3F3;
    font-style: italic;

  }

  #seniority:before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: linear-gradient(to right, #D4C1E1, #C2D1F9);
    border-radius: 0.05rem;
    transform: skewX(-15deg);
    z-index: -1;
  }
</style>
<style scoped>
.demo {
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  line-height: 0.38rem;
  padding: 0 0.2rem;
  border-radius: 1rem;
  font-size: 0.22rem;
  background: linear-gradient(to right, #F1EBF5, #EBF0FD);
  text-align: center;
  color: #8E8E8E;
  margin-right: 0.2rem;
}

.card {
  display:flex;
  margin-left:0;
  padding:5px 15px;
  overflow:hidden;
  position:relative;
  background-color: white;
}


.thumbnail {
  width: 2.2rem;
  height: 2.77rem;
  position:relative;
  margin-left:auto;
  margin-right:auto;
  overflow:hidden;
  background-size:cover;
  border-radius: 0.1rem;
}

.thumbnail .avatar {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:auto;
  overflow:hidden;
  max-width:100%;
  height:100%;
}

.detail {
  flex:1;
  margin-left:10px;
  position:relative;
}

.detail-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 4.5rem;
}

.title {
  height:0.33rem;
  font-size:0.33rem;
  color: #333333;
  line-height:0.33rem;
  margin: 0.1rem 0 0.1rem 0;
}
.mono {
  width:4.35rem;
  height:1.12rem;
  font-size:0.28rem;
  color:rgba(142,142,142,1);
  line-height:0.42rem;
}
</style>
